<template>
  <div class="" :style="{ height: statusBarHeight + 'px' }"></div>
  <div
    class="flex justify-center items-center"
    :style="{ height: navBarHeight + 'px' }"
  >
    <slot />
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";

const statusBarHeight = ref(0);
const navBarHeight = ref(36);

const logWindowInfo = () => {
  const windowInfo = uni.getWindowInfo(); // 获取窗口信息，包括状态栏高度等
  const menuButtonInfo = uni.getMenuButtonBoundingClientRect(); // 获取菜单按钮的位置信息
  statusBarHeight.value = windowInfo.statusBarHeight; // 设置状态栏高度
  const paddingBottom = menuButtonInfo.top - windowInfo.statusBarHeight;
  navBarHeight.value =
    menuButtonInfo.bottom - windowInfo.statusBarHeight + paddingBottom;
};

onMounted(() => {
  logWindowInfo();
});
</script>
